<template>
  <view class="demo-page">
    <view class="demo-header">
      <text class="demo-title">日期选择器演示</text>
      <text class="demo-subtitle">使用 uni-app 官方 picker-view 组件</text>
    </view>
    
    <view class="demo-content">
      <!-- 触发按钮 -->
      <view class="demo-section">
        <text class="section-title">选择出生日期</text>
        <view class="trigger-button" @click="showDatePicker">
          <text class="button-text">{{ selectedDate || '请选择日期' }}</text>
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>
      
      <!-- 显示选择的日期 -->
      <view class="demo-section" v-if="selectedDate">
        <text class="section-title">已选择的日期</text>
        <view class="selected-info">
          <text class="info-label">年份：</text>
          <text class="info-value">{{ selectedYear }}年</text>
        </view>
        <view class="selected-info">
          <text class="info-label">月份：</text>
          <text class="info-value">{{ selectedMonth }}月</text>
        </view>
        <view class="selected-info">
          <text class="info-label">日期：</text>
          <text class="info-value">{{ selectedDay }}日</text>
        </view>
      </view>
      
      <!-- 功能说明 -->
      <view class="demo-section">
        <text class="section-title">功能特点</text>
        <view class="feature-list">
          <view class="feature-item">
            <text class="feature-icon">🎯</text>
            <text class="feature-text">使用 uni-app 官方 picker-view 组件</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">📱</text>
            <text class="feature-text">支持触摸滑动和惯性滚动</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">🎨</text>
            <text class="feature-text">现代化 UI 设计，符合移动端交互习惯</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">⚡</text>
            <text class="feature-text">平滑的动画效果和渐变遮罩</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 日期选择器 -->
    <DatePicker 
      :visible="showPicker" 
      :value="selectedDate"
      @cancel="hideDatePicker"
      @confirm="confirmDate"
    />
  </view>
</template>

<script>
import DatePicker from '@/components/DatePicker/DatePicker.vue'

export default {
  components: {
    DatePicker
  },
  data() {
    return {
      showPicker: false,
      selectedDate: '2008-08-18',
      selectedYear: 2008,
      selectedMonth: 8,
      selectedDay: 18
    }
  },
  methods: {
    showDatePicker() {
      this.showPicker = true;
    },
    
    hideDatePicker() {
      this.showPicker = false;
    },
    
    confirmDate(date) {
      console.log('选择的日期:', date);
      this.selectedDate = date;
      
      // 解析日期
      const dateObj = new Date(date);
      this.selectedYear = dateObj.getFullYear();
      this.selectedMonth = dateObj.getMonth() + 1;
      this.selectedDay = dateObj.getDate();
      
      this.hideDatePicker();
      
      // 显示提示
      uni.showToast({
        title: '日期选择成功',
        icon: 'success',
        duration: 2000
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
}

.demo-header {
  text-align: center;
  padding: 40rpx 0;
  
  .demo-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 10rpx;
  }
  
  .demo-subtitle {
    font-size: 24rpx;
    color: #666;
  }
}

.demo-content {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  margin-top: 20rpx;
}

.demo-section {
  margin-bottom: 40rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .section-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 20rpx;
    display: block;
  }
}

.trigger-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  background-color: #f8f8f8;
  border-radius: 12rpx;
  border: 2rpx solid #e0e0e0;
  
  .button-text {
    font-size: 30rpx;
    color: #333;
  }
}

.selected-info {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
  
  .info-label {
    font-size: 28rpx;
    color: #666;
    width: 120rpx;
  }
  
  .info-value {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
  }
}

.feature-list {
  .feature-item {
    display: flex;
    align-items: center;
    padding: 15rpx 0;
    
    .feature-icon {
      font-size: 32rpx;
      margin-right: 20rpx;
    }
    
    .feature-text {
      font-size: 28rpx;
      color: #666;
    }
  }
}
</style> 